<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="mobileOptimized" content="240" />
<meta name="format-detection" content="telephone=no" />
<title>dom元素操作方式性能对比</title>
</head>
<body>

dom元素操作性能低是因为dom操作影响了dom元素显示效果。


建议每次操作尽量轻轻触碰dom,dom操作尽量在ECAMScript范围，然后一次调用dom接口插入dom节点。
<div id="dom">0</div>
<script type="text/javascript">

var scriptOjb = document.getElementById("dom");
scriptOjb.a=0;
var start = new Date();
for(var i=0;i<1000;i++){
	scriptOjb.innerHTML += i;
}
console.log("dom+= 写入"+(new Date()-start));


</script>
<script type="text/javascript">
var scriptOjb = document.getElementById("dom");
var start = new Date();
var sum = 0;
for(var i=0;i<1000;i++){
	sum += i;
}
scriptOjb.innerHTML = sum;
console.log("dom最后写入"+(new Date()-start));


</script>
</body>
</html>